<template>
    <nav>
        <ul>
            <li>
                <router-link :to="{
                    path: '/register/commom',
                    query: {
                        type: encodeURI('普通预约'),
                    }
                }" active-class="active">
                    <span>普通预约</span>
                </router-link>
            </li>
            <li>
                <router-link :to="{
                    path: '/register/expert',
                    query: {
                        type: encodeURI('专家预约')
                    }
                }" active-class="active">
                    <span>专家预约</span>
                </router-link>
            </li>
        </ul>
    </nav>
</template>

<style lang="scss" scoped>
nav {
    width: 100%;
    height: 90px;
    line-height: 90px;
    border-bottom: 1px solid #eaeaea;
    // position: fixed;
    //     top: 0;
    //     left: 0;


    ul {
        display: flex;
        text-align: center;
        font-size: 30px;
        width: 100%;
        height: 90px;



        li {
            flex: 1;
            display: flex;
            justify-content: center;

            a {
                color: black;
            }

            a.active {
                width: 50%;
                border-bottom: 2px solid rgb(85, 195, 238);
                display: block;
                color: rgb(85, 195, 238);
            }
        }
    }
}
</style>